<template>
  <div class="materialScience">
    <h2 class="title">{{ title }}</h2>
    <ul class="choice">
      <li
        v-for="item in list"
        :key="item"
        class="choice_item"
        @click="addTitle(item)"
      >
        {{ item }}
      </li>
    </ul>
    <div class="con_wrap" v-for="(item, index) in value" :key="item + index">
      <input
        type="text"
        :placeholder="conpl.title"
        v-model="item.title"
        class="input"
        @focus="titleIndex(index)"
      />
      <input
        type="text"
        :placeholder="conpl.con"
        v-model="item.con"
        class="input"
      />
    </div>
    <p @click="add" class="add">再新增一行</p>
  </div>
</template>

<script>
export default {
  name: "MaterialsUsed",
  props: {
    value: Array,
    list: Array,
    title: String,
    conpl: Object,
  },
  data() {
    return {
      inp: "",
    };
  },
  methods: {
    add() {
      this.value.push({
        title: "",
        con: "",
      });
    },
    titleIndex(index) {
      this.inp = index;
    },
    addTitle(value) {
      if (this.inp === "") {
        return;
      }
      this.value[this.inp].title = value;
      this.inp = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.materialScience {
  margin-top: 6.6667vw;
  .title {
    font-weight: 800;
    font-size: 4.5vw;
    margin-bottom: 5.3333vw;
  }
  .choice {
    margin-bottom: 5.3333vw;
    width: 100%;
    display: flex;
    align-items: center;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .choice_item {
      font-size: 3.4333vw;
      padding: 1.6vw;
      flex-shrink: 0;
      border-radius: 1.3333vw;
      color: #9c9eaf;
      background: #f8f8f8;
      margin-right: 1.3333vw;
      &:nth-last-of-type() {
        margin-right: 0;
      }
    }
  }
  .con_wrap {
    padding: 6.6667vw 0;
    width: 100%;
    display: flex;
    position: relative;
    &:before {
      content: "";
      pointer-events: none; /* 防止点击触发 */
      box-sizing: border-box;
      position: absolute;
      width: 200%;
      height: 200%;
      left: 0;
      bottom: 0;
      border-bottom: 1px solid #f2f1f1;
      transform: scale(0.5);
      transform-origin: 0 100%;
    }
    .input {
      width: 50%;
      outline: none;
      border: 0;
      font-size: 4.8vw;

      &::placeholder {
        color: #bcbcbc;
      }
    }
  }
  .add {
    margin-top: 5.3333vw;
    color: #3a57f0;
    font-size: 4.2667vw;
  }
}
</style>